const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 默认启动端口设置
  devServer: {
    port: 5600, //devServer//设置本地默认端口
    host: 'localhost',
    open: true, //build自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://apis.juhe.cn/', //目标地址
        // ws: true,  //是否启用websockets
        logLevel: 'debug',
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { '^/api': '/' } //这里重写路径
      }
    }
  },
  //全局 sass的配置
  chainWebpack(config) {
    globalSass(config)
  }
})

/**
 * 注意Dependencies需要引入
 * "sass": "^1.32.7",
 *"sass-loader": "^12.0.0",
 *"sass-resources-loader": "^2.2.5"
 * 全局变量的Sass引方法
 * @param config  chainWebpack(config) 中来的一个配置
 */
const globalSass = (config) => {
  const oneOfsMap = config.module.rule('scss').oneOfs.store
  oneOfsMap.forEach((item) => {
    item
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: './src/style/index.scss' //相对路径
      })
      .end()
  })
}
